<template>
	<view class="wrapper jf safe-area">
		<!--头部-->
		<view class="jf-header main-flex">
			<view class="jf-header-box main-flex">
				<!-- <image class="jf-header-icon" src="/static/images/icon/jf_icon.png"></image> -->
				<view class="jf-header-num main-flex">
					<view class="jf-header-num-text">{{userStore?.user?.integral || 0}}</view>
					<view class="jf-header-num-unit">积分</view>
				</view>
			</view>
			<view class="jf-header-btn" @click="goUrl('/pages/jf/list')">积分明细</view>
		</view>
		<!--内容-->
		<view class="jf-content">
			<view class="jf-list">
				<u-waterfall v-model="tableList" columns="2">
					<template v-slot:column="{colList, colIndex}">
						<view class="goods-box" v-for="(item, index) in colList" :key="index">
							<view class="goods-img">
								<view class="goods-img-url">
									<lazy-load
										:image="imgUrl(item.adImg)"
										loading-img="/static/images/loading.png"
										error-img="/static/images/error.png"
										img-mode="widthFix">
									</lazy-load>
								</view>
							</view>
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-other main-flex">
								<view class="goods-jf main-flex">
									<text class="goods-jf-num">{{item?.integralValue || 0}}</text>
									<text class="goods-jf-unit">积分</text>
								</view>
								<button
									class="ty-button ty-button-confirm goods-btn"
									@click="goBuy(item)"
									:disabled="userStore?.user?.integral < item.integralValue" size="mini">
									{{userStore?.user?.integral < item.integralValue ? '积分不足' : '立即兑换'}}
								</button>
							</view>
						</view>
					</template>
					<!-- <template v-slot:left="{leftList}">
						<view class="goods-box" v-for="(item, index) in leftList" :key="index">
							<view class="goods-img">
								<view class="goods-img-url">
									<lazy-load
										:image="imgUrl(item.adImg)"
										loading-img="/static/images/loading.png"
										error-img="/static/images/error.png"
										img-mode="widthFix">
									</lazy-load>
								</view>
							</view>
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-other main-flex">
								<view class="goods-jf main-flex">
									<text class="goods-jf-num">{{item.integralValue}}</text>
									<text class="goods-jf-unit">积分</text>
								</view>
								<button
									class="goods-btn btn main-flex"
									@click="goBuy(item)"
									:disabled="userStore?.user?.integral < item.integralValue" size="mini">
									{{userStore?.user?.integral < item.integralValue ? '积分不足' : '立即兑换'}}
								</button>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="goods-box" v-for="(item, index) in rightList" :key="index">
							<view class="goods-img">
								<view class="goods-img-url">
									<up-image
										:showLoading="true"
										:src="imgUrl(item.adImg)"
										width="100%"
										height="100%"
										mode="aspectFill">
									</up-image>
								</view>
							</view>
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-other main-flex">
								<view class="goods-jf main-flex">
									<text class="goods-jf-num">{{item.integralValue}}</text>
									<text class="goods-jf-unit">积分</text>
								</view>
								<button
									class="goods-btn btn main-flex"
									@click="goBuy(item)"
									:disabled="userStore?.user?.integral < item.integralValue" size="mini">
									{{userStore?.user?.integral < item.integralValue ? '积分不足' : '立即兑换'}}
								</button>
							</view>
						</view>
					</template> -->
				</u-waterfall>
			</view>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="数据为空" icon="/static/images/null.png"></u-empty>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view>
		</view>
		<!--积分兑换-->
		<uni-popup ref="popup" type="dialog">
		  <uni-popup-dialog
				type="info"
		    title="商品兑换"
		  	@confirm="dialogConfirm">
				<view class="popup-jf">
					<view class="popup-jf-content">
						兑换
						<text class="popup-jf-content-name">{{chooseGoods.name}}</text>
						所需积分为
						<text class="popup-jf-content-count">{{chooseGoods?.integralValue || 0}}</text>
					</view>
					<view class="popup-jf-content">
						确认兑换
						<text class="popup-jf-content-name">{{chooseGoods.name}}</text>
						吗？</view>
				</view>
		  </uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { couponProductShopList, couponProductBuy } from "@/api/app_api/user"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 列表查询
	const type = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		couponProductShopList().then(res => {
			tableList.value = res.data || []
			status.value = 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
			// uni.hideLoading()
		})
	}
	
	// 兑换
	const popup = ref(null)
	const chooseGoods = ref({})
	const goBuy = (item) => {
		if (Number(item.integralValue) <= Number(userStore.user.integral)) {
			chooseGoods.value = item
			popup.value.open()
		} else {
			uni.$u.toast('积分不足')
		}
	}
	
	// 确认兑换
	const isSubmit = ref(false)
	const dialogConfirm = () => {
		if (isSubmit.value) return false
		isSubmit.value = true
		couponProductBuy({
			id: chooseGoods.value.id
		}).then(res => {
			uni.$u.toast(res.msg)
			chooseGoods.value = {}
			userStore.getUserInfo()
			isSubmit.value = false
			popup.value.close()
		}).catch(() => {
			isSubmit.value = false
		})
	}
	
	// 页面跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
	
	onLoad(() => {
		searchFirst()
	})
	
	// 微信小程序配置：禁用样式隔离
	defineOptions({
	  options: {
	    styleIsolation: 'shared' // 关键配置
	  }
	})
</script>

<style lang="scss">
	.jf {
		&-header {
			position: fixed;
			left: 0;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			background-color: #fff;
			&-icon {
				width: 48rpx;
				height: 48rpx;
			}
			&-num {
				align-items: baseline;
				&-text {
					font-size: 48rpx;
					font-weight: 600;
					color: $primary-color;
				}
				&-unit {
					font-size: 26rpx;
					color: $text-light;
					margin-left: 10rpx;
				}
			}
			&-btn {
				font-size: 28rpx;
				color: $text-light;
				margin-left: auto;
			}
		}
		&-content {
			padding-top: 120rpx;
		}
		&-list {
			padding: 0 20rpx;
			.goods-box + .goods-box {
				margin-top: 20rpx;
			}
		}
		.goods {
			&-box {
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
			}
			&-img {
				width: 100%;
				height: 305rpx;
				text-align: center;
				&-url {
					width: 305rpx;
					height: 305rpx;
					margin: 0 auto;
				}
			}
			&-name {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
			&-other {
				margin-top: 20rpx;
			}
			&-jf {
				align-items: baseline;
				&-num {
					font-size: 36rpx;
					color: $primary-color;
				}
				&-unit {
					font-size: 24rpx;
					margin-left: 4rpx;
				}
			}
			&-btn {
				height: 42rpx;
				border-radius: 20rpx;
				background-color: $primary-color;
				font-size: 24rpx;
				color: #fff;
				line-height: 42rpx;
				padding: 0 10rpx;
				margin: 0;
				margin-left: auto;
				justify-content: center;
				&::after {
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: none;
					transform: scale(0.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					border-radius: 10px;
				}
			}
		}
	}
	.popup-jf {
		&-content {
			font-size: 28rpx;
			text-align: center;
			&-count {
				color: $primary-color;
			}
			&-name {
				color: $alert-color;
			}
		}
	}
	:deep(.u-column) {
		&:not(:first-child) {
				margin-left: 20rpx !important;
		}
	}
</style>
